import { defineConfig, UserConfigExport, ConfigEnv } from 'vite'
import react from '@vitejs/plugin-react'
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
import vitePluginCompress from 'vite-plugin-compression'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ command }: ConfigEnv) => {
  return ({
    plugins: [
      react(),
      // 配置样式的按需加载
      createStyleImportPlugin({
        // // 方式一：动态加载样式文件——vant 特有
        // resolves: [VantResolve()]

        // 方式二：动态加载样式文件——通用方法
        libs: [
          {
            libraryName: 'react-vant',
            //  2 倍大小的样式文件
            // resolveStyle: (name) => `react-vant/2x/es/${name}/style/index.css`,
            resolveStyle: (name) => `react-vant/es/${name}/style/index.css`
          },
        ],
      }),
      PkgConfig({
        packageJsonPath: './vite/vite.json'
      }),
      OptimizationPersist(),

      // 开启 gzip 压缩
      vitePluginCompress(),

      // mock 数据配置
      viteMockServe({
        // default
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
    ],

    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },

    server: {
      host: '0.0.0.0'
    }
  })
}
)
